<template>
  <div style="margin-top: 30px">
    <el-row :gutter="10" type="flex" class="row-content" justify="center">
      <el-col :span="2">
        <article-left-operation></article-left-operation>
      </el-col>
      <el-col :span="12">
        <article-content></article-content>
        <article-comment @triggerBrotherMethods="triggerBrotherMethods"></article-comment>
        <article-comments ref="borther"></article-comments>
      </el-col>
      <el-col :span="4">
        <user></user>
        <carousel-a-d-small style="margin-top: 20px"></carousel-a-d-small>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import articleLeftOperation from '../components/article/articleLeftOperation'
import articleContent from '../components/article/articleContent'
import articleComment from '../components/article/articleComment'
import articleComments from '../components/article/articleComments'
import user from '../components/user/user'
import carouselADSmall from '../components/AD/carouselADSmall'
import { GetUrlParam } from '../utils/getUrlParams'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
    }
  },
  created () {
  },
  beforeMount () {
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    ...mapMutations(['setArticleContent']),
    // 触发子组件（articleComments）中的获取当前文章评论事件
    triggerBrotherMethods () {
      // 父组件通过$ref调用子组件articleComments中的事件方法
      // console.log(this.$refs.borther.getArticleComment)
      this.$refs.borther.getArticleComment()
    }
  },
  computed: {},
  name: 'essay',
  components: { articleLeftOperation, articleContent, articleComment, articleComments, user, carouselADSmall }
}
</script>

<style lang="less" scoped>

</style>
